body {
  font-family: -apple-system, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
}

.login {
  background: $bg;
  position: absolute;
  width: 100%;
  height: 100%;

  .board {
    margin-top: -40px;
    @include forceAlign(both);
    background: white;
    border: solid 1px $borderColor;
    padding: 24px;
    width: 280px;
    border-radius: $radius;

    .logo {
      width: 40px;
      height: 40px;
      @include bgImg('../assets/logo.svg');
      margin: 0 auto 20px;
    }

    .el-input {
      margin-bottom: 16px;
      width: 100%;
    }

    button {
      width: 100%;
    }
  }
}

.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: solid 1px $borderColor;

  & > * {
    display: flex;
    align-items: center;
  }

  .logo {
    width: 28px;
    height: 28px;
    @include bgImg('../assets/logo.svg');
  }

  .editor {
    font-size: 14px;
    margin-right: 16px;
    font-weight: bolder;
  }
}

.editor {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;

  .preview {
    flex-shrink: 0;
    overflow: hidden;
    background: url("../assets/ps-neutral.png");
    padding: 40px;

    .wrapper {
      overflow: hidden;
      width: 360px;
      height: 640px;
      transform-origin: top left;

      .extra,
      .filter,
      .image,
      .overlay {
        top: 0;
        left: 0;
        position: absolute;
        width: 100%;
        height: 100%;
      }

      .copy {
        position: absolute;
        bottom: 10px;
        right: 10px;
        @include bgImg('../assets/copy.png');
        width: 30px;
        height: 8px;
        z-index: 999;
      }

      .overlay {
        z-index: 500;
      }

      .extra {
        z-index: 999;
        -webkit-font-smoothing: antialiased;

        &.v2 {
          font-weight: normal;
          color: white;

          .logo {
            @include bgImg('../assets/logo_w.svg');
            width: 40px;
            height: 40px;
            position: absolute;
            bottom: 10px;
            left: 10px;
          }

          .qr {
            @include bgImg('../assets/qr.jpg');
            width: 40px;
            height: 40px;
            position: absolute;
            bottom: 10px;
            right: 10px;
          }

          .poem {
            p {
              width: 100%;
              margin: 0;
              @include forceAlign(both);
            }
            position: absolute;
            bottom: 64px;
            height: 90px;
            width: 100%;
            text-align: center;
            font-size: 10px;
            line-height: 20px;
            letter-spacing: 4px;
            font-family: 'FZJUNH_CUJW--GB1-0';
          }

          .vol {
            position: absolute;
            right: 10px;
            top: 10px;
            font-size: 11px;
            font-family: 'HeadlinerNo.45';
          }

          .date {
            font-family: 'HeadlinerNo.45';
            text-align: center;
            position: absolute;
            left: 10px;
            top: 5px;

            p {
              font-size: 106px;
              margin: 0;
            }

            span {
              transform: translateY(-22px);
              display: block;
              font-size: 30px;
            }
          }
        }
      }

      .image {
        img {
          width: auto;
          height: 100%;
          @include forceAlign(x);
        }
      }
    }
  }
}

.config {
  margin-left: 40px;
  width: 800px;
  flex-grow: 0;

  .tune {
    padding: 0 16px;
    width: 360px;
  }

  .tunewrapper {
    display: flex;
  }

  .bar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
  }

  .themes {
    div {
      width: 180px;
      margin-right: 16px;

      img {
        width: 180px;
        height: 180px;
      }
      text-align: center;
    }
  }

  .filters {
    width: 100%;
    overflow-x: scroll;
    white-space: nowrap;

    & > div {
      text-align: center;
      display: inline-block;
      margin-right: 16px;

      p {
        font-weight: bold;
        text-align: center;
      }

      & > div {
        position: relative;
        width: 180px;
        height: 320px;
        overflow: hidden;

        img {
          @include forceAlign(x);
          width: auto;
          height: 320px;
        }
      }
    }
  }
}

.capturezone {
  position: relative;
  overflow: hidden;
  height: 640px;
  width: 360px;

  &.output {
    & > .wrapper {
      transform: scale(2.3);
    }
    width: 828px;
    height: 1472px;
  }
}

.finalpreview {
  display: flex;
  justify-content: space-between;

  & > div {
    margin: 0 16px;

    img {
      width: 100%;
      height: auto;
    }
  }
}
.directupload{
  input {
    margin-bottom:16px;
  }
}

.source-editor {
  .hint {
    font-size:10px;
    line-height: 20px;
  }
  .save {
    margin-top: 24px;
  }
  .uploadimage{
    p{
      color:#409EFF;
      cursor: pointer;
      margin:0 0 10px 0;
    }
    span{
      font-size:10px;
    }
  }
  .preview {
    .audio {
      text-align: center;
      font-weight: bold;

      .title {
        font-size: 24px;
      }

      .author {
        font-size: 17px;
        color: rgba(#333333,.75);
      }
    }

    .post {
      .compiled{
        @include globalpoststyle;
      }
      width:375px;
      box-sizing: border-box;
      padding:16px;
      border:solid 1px $borderColor;
      .help {
        font-size: 12px;
        border-bottom: solid 1px rgba(0,0,0,.12);
      }

      .title {
        color:black;
        font-weight: bold;
        font-size:17px;
        margin:0 0 20px 0;
      }

      .author {
        font-size: 11px;
        color: #888888;
        margin:16px 0 8px 0;
      }
    }
  }
}

.sourcecard {
  cursor: pointer;
  position: relative;
  &:hover {
    .dropbtn{
      display: block;
    }
  }
  .dropbtn{
    position:absolute;
    right:16px;
    top:16px;
    z-index:1;
    display: none;
  }
  &.audio {
    .icon {
      i {
        @include bgImg('../assets/audio.svg');
      }
    }
  }

  &.video {
    .icon {
      i {
        @include bgImg('../assets/video.svg');
      }
    }
  }

  &.post {
    .icon {
      i {
        @include bgImg('../assets/post.svg');
      }
    }
  }

  .el-card__body {
    padding: 0;
  }

  .icon {
    width: 100%;
    height: 100px;
    background: rgba(#333333,.95);
    position: relative;

    i {
      width: 60px;
      height: 60px;
      @include forceAlign(both);
    }
  }

  .desc {
    padding: 16px;

    p {
      font-size: 17px;
      font-weight: bold;
      margin: 0 0 5px;
    }

    & > div {
      align-items: center;
      display: flex;
      justify-content: space-between;

      & > span {
        font-size: 12px;
        color: rgba(#333333,.75);
      }
    }
  }
}

.sources {
  .preview {
    audio,video{
      width:100%;
    }
  }

  .el-col{
    margin-bottom:16px;
  }
  .el-row {
    margin-bottom: 16px;
  }


}

.cards {
  .el-row {
    margin-bottom: 16px;
  }

  .card {
    position: relative;
    .dropbtn{
      position: absolute;
      top:16px;
      right:16px;
      z-index:1;
      display:none;
    }
    &:hover {
      .dropbtn{
        display: block;
      }
    }
    cursor: pointer;
    img {
      width: 100%;
      height: auto;

      &:hover {
        opacity: 0.75;
      }
      display: block;
    }
    background: black;
  }
}

.card-detail {
  .head {
    display: flex;

    .date {
      span {
        font-size: 14px;
        display: inline-block;
        margin-right: 5px;
      }
      margin-right: 24px;
    }
  }

  .list {
    margin-bottom:60px;
    .image {
      .el-col{
        position: relative;
        &:hover {
          button{
            display:block;
          }
        }
        button{
          display:none;
          position: absolute;
          right:16px;top:16px;
          z-index:1
        }
        img {
          &:hover{
            opacity:.75;
          }
          display: block;
          width: 100%;
          height: auto;
          cursor: pointer;
        }
      }
    }

  }

  .preview {
    display: flex;
    justify-content: flex-start;
    margin: 24px 0;

    & > div {
      width: 400px;
      height: 400px;
      background: rgba(0,0,0,.08);
      margin-right: 40px;
      position: relative;
      .image {
        width:160px;
        height:auto;
        @include forceAlign(both);
      }
      .sourcecard{
        width:160px;
        @include forceAlign(both);
      }
      .btns {
        width: 100%;
        text-align:center;
        bottom: 16px;
        @include forceAlign(x);
      }
    }
  }
}
